<!--
 * @Author: your name
 * @Date: 2021-04-23 09:17:50
 * @LastEditTime: 2021-04-23 14:49:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \active-front\src\components\Hotevents\newsDetail\index.vue
-->
<template>
  <div v-if="sy" class="center">
    <!-- <el-page-header
      @back="goBack"
      class="box-card go-back"
      :content="sy.roleId < 3 ? '待处理活动' : '我的活动'"
    >
    </el-page-header> -->
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="color:#E6A23C;font-size:26px">
        <span>{{ sy.roleId !== 3 ? "待处理活动" : "我的活动" }}</span>
        <el-button
          style="float: right; padding: 5px 15px"
          @click="goBack"
          type="primary"
        >
          返回
        </el-button>
      </div>
      <div v-for="item in rows" :key="item.aid" class="text item ">
        <el-row type="flex" align="center" :gutter="10">
          <el-row :span="4" style="line-height:32px;height:32px;color:#67C23A">
            {{ item.modifyDate }}
          </el-row>
          <el-col :span="1"></el-col>
          <el-col :span="10">
            <div style="line-height:32px;height:32px">
              {{ item.activeName }}
            </div>
          </el-col>
          <el-col :span="5" style="text-align:end">
            <el-tag :type="item.state === 1 ? null : 'danger'">
              {{ item.stateName }}
            </el-tag>
          </el-col>
          <el-col :span="3" style="text-align:end;line-height:32px;height:32px">
            <el-link type="info" @click="actInfo(item.aid)">去查看></el-link>
          </el-col>
          <el-col :span="1">
            <div class="circular">
              <span
                style="height:20px; line-height:20px; display:block; color:#FFF; text-align:center"
              >
                {{ item.newsNum === 1 && sy.roleId === 3 ? "" : item.newsNum }}
              </span>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
    </el-card>
  </div>
</template>

<script>
import actApi from "../../../api/HotEvent";
export default {
  data() {
    return {
      sy: null,
      rows: null
    };
  },
  methods: {
    goBack() {
      history.go(-1);
    },
    actInfo(id) {
      this.$router.push({ path: "/info/personal/textpage", query: { id } });
    },
    //时间戳转换方法    date:时间戳数字
    formatDate(date) {
      var date = new Date(date);
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // return YY + MM + DD + " " + hh + mm + ss;
      return YY + MM + DD;
    }
  },
  async mounted() {
    const sy = JSON.parse(localStorage.getItem("sy"));
    this.sy = sy;
    const data = await actApi.newsDetail();
    data.map(item => {
      if (item.state === 0) {
        item.stateName = "等待管理员确认";
      } else if (item.state == 1) {
        item.stateName = "管理员已确认";
      } else if (item.state == 2) {
        item.stateName = "管理员已拒绝";
      }
      item.modifyDate = this.formatDate(item.modifyDate);
    });
    this.rows = data;
    console.log("待处理活动", data);
  }
};
</script>

<style scoped>
.text {
  font-size: 14px;
}
.center {
  /* height: 100vh; */
  /* width: 100vw; */
  display: flex;
  justify-content: center;
  /* align-items: center; */
}
.item {
  margin-bottom: 18px;
}

.clearfix {
  line-height: 1;
  vertical-align: 50%;
}

/* .clearfix:after {
  display: table;
  content: "";
} */
.clearfix:after {
  clear: both;
}
.circular {
  width: 20px;
  height: 20px;
  background-color: #f56c6c;
  border-radius: 50%;
  /* line-height: 32px; */
  position: relative;
  top: 50%; /*偏移*/
  margin-top: -8px;
  /* margin-left: 10px; */
}
.box-card {
  width: 60%;
}
</style>
